﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #myDiv .imgBox {display: inline-block;height: 280px;width: 200px;font-size: 12px;margin: 2px;overflow: hidden;}
        #myDiv .imgBox img{width: 100px;height: 100px;}
        #myDiv .imgBox .FaceQuality{width: 100px;height: 100px;}
        .dayItem .title{background-color: #333;color:#fff;padding: 10px;letter-spacing: 2px;}
    </style>
    <script src="config.js"></script>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery.lazyload.min.js"></script>
    <script>
        $(function () {
          var serverIP = caijingdaxueip;                                    //要访问的Ip
          var id = decodeURI(window.location.href).split("?id=")[1];        //人档id
          var _data ;                                                       //请求接口缓存数据
          if (id) {
              $("#id").val(id);
              $.get(serverIP  + "/acvsInfo?id=" + $("#id").val(),function (data) {
                _data = JSON.parse(data);
                _data.forEach(function (item,index) {
                  console.log(FunGetDate(item.timestamp* 1000, "Y-M-D h:m:s"))
                })
                _data.sort(function (a,b) {
                  return b.timestamp - a.timestamp;
                })
                console.log('11111');
                _data.forEach(function (item,index) {
                  console.log(FunGetDate(item.timestamp* 1000, "Y-M-D h:m:s"))
                })
                loadJSON(_data)
              })
          }
          //生成结果
          function loadJSON(arcs) {
            console.log(arcs);
            for (var i = 0; i < arcs.length; i++) {
              var $tpl1 = $($('#tpl1').html())
              var tpl2 = $('#tpl2').html()
              if (i == 0) {
                $tpl1.find('.title').html(FunGetDate(arcs[i].timestamp* 1000, "Y-M-D"))
                $tpl1.append(getTpl(arcs[i],tpl2))
                $tpl1.appendTo('#myDiv')
              }else{
                if (FunGetDate(arcs[i].timestamp* 1000, "Y-M-D") == FunGetDate(arcs[i - 1].timestamp* 1000, "Y-M-D")){
                    $('.dayItem').last().append(getTpl(arcs[i],tpl2))
                }else{
                  $tpl1.find('.title').html(FunGetDate(arcs[i].timestamp* 1000, "Y-M-D"))
                  $tpl1.append(getTpl(arcs[i],tpl2))
                  $tpl1.appendTo('#myDiv')
                }
              }
            }
            $("img").lazyload();
          }
        })
        /**
         * 转化日期格式
         * _timestamp   时间字符串（为空时以当前时间替代）
         * _formats     时间显示格式（为空时默认返回数组结果）
         */
        function FunGetDate (_timestamp, _formats) {
          var arr = new Array(),
            myDate = _timestamp ? new Date(_timestamp) : new Date(),
            year = ZeroFill(myDate.getFullYear()),
            month = ZeroFill(myDate.getMonth() + 1),
            day = ZeroFill(myDate.getDate()),
            hour = ZeroFill(myDate.getHours()),
            minute = ZeroFill(myDate.getMinutes()),
            second = ZeroFill(myDate.getSeconds())
          if (_formats) {
            return _formats.replace(/Y|M|D|h|m|s/g, function(matches) {
              return ({
                Y: year,
                M: month,
                D: day,
                h: hour,
                m: minute,
                s: second
              })[matches]
            })
          } else {
            arr.Y = year
            arr.M = month
            arr.D = day
            arr.h = hour
            arr.m = minute
            arr.s = second
            return arr
          }
          function ZeroFill (obj) {
            return obj.toString().replace(/^(\d)$/, '0$1')
          }
        }
        //模板替换
        function getTpl(data,tpl2) {
          tpl2 = tpl2.replace('{{img}}',"http://192.168.3.35:6969/"+data._id+".jpeg")
          tpl2 = tpl2.replace(/{{score}}/g,data.score)
          tpl2 = tpl2.replace(/{{x}}/g,Number(data.x).toFixed(2))
          tpl2 = tpl2.replace(/{{y}}/g,Number(data.y).toFixed(2))
          tpl2 = tpl2.replace(/{{z}}/g,Number(data.z).toFixed(2))
          tpl2 = tpl2.replace(/{{detectFace}}/g,data.detectFace)
          tpl2 = tpl2.replace(/{{emoticons}}/g,data.emoticons)
          tpl2 = tpl2.replace(/{{quality}}/g,(data.quality === undefined?'':Number(data.quality).toFixed(2)))
          tpl2 = tpl2.replace(/{{FaceQuality}}/g,(data.FaceQuality === undefined?'':Number(data.FaceQuality).toFixed(2)))
          tpl2 = tpl2.replace(/{{time}}/g,FunGetDate(data.timestamp* 1000, "h:m:s"))
          tpl2 = tpl2.replace(/{{_id}}/g,data._id)
          return tpl2;
        }
    </script>
</head>
<body style='background:#ccc'>
    <input id="id" type="hidden" value=""/>
    <div id="myDiv"></div>
</body>
<template id="tpl1">
    <div class="dayItem">
        <div class="title"></div>
    </div>
</template>
<template id="tpl2">
    <div class="imgBox">
        <img src="{{img}}" alt="">
        <div class="detail">
            <div title="{{score}}">score:{{score}}</div>
            <div title="{{x}}">x:{{x}}</div>
            <div title="{{y}}">y:{{y}}</div>
            <div title="{{z}}">z:{{z}}</div>
            <div title="{{detectFace}}">detectFace:{{detectFace}}</div>
            <div title="{{emoticons}}">emoticons:{{emoticons}}</div>
            <div title="{{quality}}">quality:{{quality}}</div>
            <div title="{{FaceQuality}}">FaceQuality:{{FaceQuality}}</div>
            <div title="{{time}}">time:{{time}}</div>
            <div title="{{_id}}">_id:{{_id}}</div>
        </div>
    </div>
</template>
</html>